<template>
	<view class="content">
		<u-image mode="widthFix" :lazy-load="true" src="~@/static/banner.png"></u-image>
		
		<u-search placeholder="请输入学号" shape="round" v-model="keyword"
			clearabled="true"
			show-action="true"
			action-text="查询"
			search-icon-color="#ed2f85"
			placeholder-color="#2b85e4"
			color="#ed2f85"
			bg-color="#a1a6b3"
			margin="20rpx"
			animation="true"
			input-align="center"
			:action-style="btnSearch"
			@clear="clear"
			@search="custom"
			@custom="custom"></u-search>
		
		<u-toast ref="uToast" />

		<view v-if= "code === 200">
			<u-divider bg-color="#161827"
				border-color="primary"
				color="#ed2f85"
				fontSize="45"
				height="50rpx"
				type="primary"
				>{{ datas.name }}</u-divider>
		</view>
		
		<view class="wrap">
			<view v-if= "code === 200">
				<u-row gutter="12">
						<u-col span="6" class="">
							<view class="left">
								<text>学号</text>
							</view>
						</u-col>
						<u-col span="6" class="">
							<view class="right">
								<text>{{ datas.no }}</text>
							</view>
						</u-col>
				</u-row>
				<u-gap height="10"></u-gap>
				<u-row gutter="12">
						<u-col span="6" class="">
							<view class="left">
								<text>专业</text>
							</view>
						</u-col>
						<u-col span="6" class="">
							<view class="right">
								<text>{{ datas.major }}</text>
							</view>
						</u-col>
				</u-row>
				<u-gap height="10"></u-gap>
			</view>
			
			<view v-if= "code === 200">
				<u-divider bg-color="#161827"
					border-color="primary"
					color="#ed2f85"
					fontSize="45"
					height="50rpx"
					type="primary"
					margin-top="20"
					margin-bottom="20">成绩</u-divider>
			</view>
			
			<view v-if= "code === 200">
				<u-row gutter="12">
					<u-col span="8" class="">
						<view class="left">
							<text>学科科目</text>
						</view>
					</u-col>
					<u-col span="4" class="">
						<view class="right">
							<text>成绩</text>
						</view>
					</u-col>
				</u-row>
				<u-gap height="20"></u-gap>
				<view  v-for="(item, index) in datas.scores" :key='index'>
					<u-row gutter="12">
						<u-col span="8" class="">
							<view class="left">
								<text>{{item.course}}</text>
							</view>
						</u-col>
						<u-col span="4" class="">
							<view class="right">
								<text>{{item.score}}</text>
							</view>
						</u-col>
					</u-row>
					<u-gap height="10"></u-gap>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Search',
				keyword: '',
				btnSearch: {
					color: '#ed2f85',
					fontSize: '35rpx'
				},
				datas: {},
				code: 404
			}
		},
		onLoad() {
			this.$u.mpShare.title = '信息工程系查成绩';
		},
		methods: {
			getBySearch(keyword){
				var _this = this;
				_this.$u.get('search/' + keyword, {}, {
					'x-token': 'guojia',
				}).then(res => {
					_this.datas = res.datas;
					_this.code = res.code;
					if( res.code === 404 ){
						_this.$refs.uToast.show({
							title: '学号 有误',
							type: 'error',
							duration: 3000
						})
					}
				});
			},
			custom(e) {
				var e = this.$u.trim(e, 'all')
				if( e === '' ){
					this.datas = {}
					this.code = 404
					this.$refs.uToast.show({
						title: '请输入学号.',
						type: 'warning',
						duration: 3000
					})
				}else{
					this.getBySearch(e);
				}
				this.keyword=''
			},
			clear() {
				this.keyword=''
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
		min-height: 100vh;
		background-color: #161827!important;
		padding: 24rpx;
	}
	.wrap {
		padding: 24rpx;
		// border: 1px dashed red;
		text {
			color:#ed2f85;
		}
		.left, .right{
			// border: 1px solid blue;
			border-radius: 50rpx;
			min-height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			text {
				font-size: 42rpx;
				font-weight: bold;
			}
		}
		.left {
			background-color: cyan;
			color: blue;
		}
		.right {
			background-color: blue;
			color: cyan;
		}
	}
</style>
